<template>
  <div class="container">
    <n-drawer v-model:show="isDrawer" :width="width">
      <n-drawer-content :title="title" closable>
        <n-form
          :model="formParams"
          :rules="rules"
          ref="formRef"
          label-placement="left"
          :label-width="100"
        >
          <n-form-item label="用户名" path="name">
            <n-input placeholder="请输入预制菜名称" v-model:value="formParams.name" />
          </n-form-item>
          <n-form-item label="价格" path="price">
            <n-input placeholder="请输入价格" v-model:value="formParams.price" />
          </n-form-item>
          <n-form-item label="预览图" path="img">
            <n-upload
              action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
              list-type="image-card"
            />
          </n-form-item>
          <n-form-item label="二维码" path="qrCode">
            <n-upload
              action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
              list-type="image-card"
            />
          </n-form-item>
          <n-form-item label="备注" path="remark">
            <n-input placeholder="请输入备注" v-model:value="formParams.remark" />
          </n-form-item>
        </n-form>

        <template #footer>
          <n-space>
            <n-button type="primary" :loading="subLoading" @click="formSubmit">提交</n-button>
            <n-button @click="handleReset">重置</n-button>
          </n-space>
        </template>
      </n-drawer-content>
    </n-drawer>
  </div>
</template>
<script lang="ts" setup>
  import { defineProps, reactive, ref } from 'vue';
  import { useMessage } from 'naive-ui';
  import { addUser } from '@/api/system/user';

  const rules = {
    label: {
      required: true,
      message: '请输入标题',
      trigger: 'blur',
    },
    path: {
      required: true,
      message: '请输入路径',
      trigger: 'blur',
    },
  };
  defineExpose({
    openDrawer,
  });

  defineProps({
    title: {
      type: String,
      default: '添加预制菜产品',
    },
    width: {
      type: Number,
      default: 450,
    },
  });

  const message = useMessage();
  const formRef: any = ref(null);
  const defaultValueRef = () => ({
    name: '',
    price: '',
    remark: '',
    avatar: '',
  });
  let isDrawer = ref(false);
  let subLoading = ref(false);

  let formParams = reactive({
    name: '',
    price: '',
    remark: '',
    avatar: '',
  });

  function openDrawer() {
    isDrawer.value = true;
  }

  function closeDrawer() {
    isDrawer.value = false;
  }

  const formSubmit = () => {
    formRef.value.validate(async (errors) => {
      if (!errors) {
        console.log(formParams);
        await addUser(formParams);
        message.success('添加成功');
        // handleReset();
        closeDrawer();
      } else {
        message.error('请填写完整信息');
      }
    });
  };

  function handleReset() {
    formRef.value.restoreValidation();
    formParams = Object.assign(formParams, defaultValueRef());
  }
</script>
<style lang="less" scoped></style>
